<template>
<div>
    <div class="layout-content">
        <Row>
            <Col span="5">
                <Menu active-name="1-2" width="auto" :open-names="['1']">
                    <Tree :data="data"  @on-select-change="onChangeTree"></Tree>
                </Menu>
            </Col>
            <Col span="19">
                <div class="layout-content-main">
                    <Upload
                        multiple
                        type="drag"
                        name="avatar"
                        :action="`http://localhost:3000/upload/upload/${cate}`"
                        :before-upload="beforeUoload"
                        :on-success="onSuccess">
                        <div style="padding: 5px 0">
                            <Icon type="ios-cloud-upload" size="42" style="color: #3399ff"></Icon>
                            <p>点击或将文件拖拽到这里上传</p>
                        </div>
                    </Upload>
                    <div style="40px">
                        <Button type="error" @click="removeMore" style="margin:0 20px">删除多条记录</Button>
                        <!-- <Button type="primary" @click="mesAdd">添加新记录</Button> -->
                        <Input v-model="filter.filename" class="inputlenth">
                            <Button slot="append" icon="ios-search" @click="searchName"></Button>
                        </Input>
                        
                    </div>
                    <div class="layout-content-main">
                        <Table class="tab" border 
                        :columns="columns7" :data="filter.data6" :height="300" 
                        @on-selection-change="onSelectChange"></Table>

                        <Page class="page" :total="filter.total" :page-size-opts="[5,10,20,40]" 
                        show-elevator show-sizer show-total 
                        @on-change="change" @on-page-size-change="changePage"></Page>
                    </div>

                </div>
            </Col>
        </Row>
    </div>
</div>
</template>
<script>

export default  {
    props:['imgId'],
    data(){
        return{
            cate:"",
            data: [
                {
                    title: '总分类',
                    expand: true,
                    children: []
                }
            ],
            columns7: [
                {
                    type: 'selection',
                    width: 60,
                    align: 'center'
                },
                {
                    title: '图片',
                    key: 'action',
                    align: 'center',
                    render: (h, params) => {
                        return h('img',{
                            attrs:{
                                src:'http://127.0.0.1:3000/'+params.row.filename,
                            },
                            style:{
                                width:'50px',
                                height:'30px',
                            },
                        })
                    }
                },
                {
                    title:"文件名",
                    key:'filename',
                    align: 'center',
                },
                {
                    title: '类型',
                    key: 'mimetype',
                    align: 'center',
                },
                {
                    title: '路径',
                    key: 'path',
                    align: 'center',
                },
                {
                    title: '大小',
                    key: 'size',
                    align: 'center',
                },
                {
                    title: '操作',
                    key: 'action',
                    width: 150,
                    align: 'center',
                    render: (h, params) => {
                        return h('div', [
                            h('Button', {
                                props: {
                                    type: 'warning',
                                    size: 'small'
                                },
                                style: {
                                    marginRight: '5px',
                                },
                                on: {
                                    click: () => {
                                        this.show(params.row)
                                    }
                                }
                            }, '修改'),
                            h('Button', {
                                props: {
                                    type: 'error',
                                    size: 'small'
                                },
                                on: {
                                    click: () => {
                                        this.remove(params.row._id)
                                    }
                                }
                            }, '删除')
                        ]);
                    }
                }
            ],
            filter:{
                data6: [],
                limit: 10,
                page: 1,
                total: 0,
                title:"",
                filename:"",
                cate:"",
                _id:"",
            },
        }
    },
    methods:{
        getCate(){
            this.$http.get("http://127.0.0.1:3000/cate/list/1")
            .then(res=>{
                this.data[0].children = res.data
            })
        },
        getData(){
            this.$http.post("http://127.0.0.1:3000/upload/list",this.filter)
            .then(res=>{
                // console.log(this.cateIds);
                this.filter.total = res.data.total;
                this.filter.data6 = res.data.rows
            })
        },
        onChangeTree(row){
            this.filter.page = 1;
            this.filter.title = "";
            this.filter.filename = "";
            if(row.length>0){
                this.cate = row[0]._id;
                if(this.cate){
                    this.$http.get("http://127.0.0.1:3000/cate/getFamily/"+this.cate)
                    .then(res=>{
                        this.filter._id = res.data.toString();
                        this.getData();
                    })
                }else{
                    this.cate = "";
                    this.filter._id = "";
                    this.getData();
                }
            }else{
                this.cate = "";
                this.filter._id = "";
                this.getData();
            }
            console.log(this.cate);
            
        },
        searchName(){
            this.getData();
        },
        removeMore(){
            this.$Modal.confirm({
                title: '删除提示',
                content: '<p>确定要删除该记录？</p>',
                onOk: () => {
                    this.$http.post("http://localhost:3000/upload/removes",{ids:this.ids.toString()})
                    .then(res=>{
                        this.getData();
                        this.$Message.info('删除成功');
                    })
                }
            });
        },
        remove(id){
            console.log(id)
            this.$Modal.confirm({
                title: '删除提示',
                content: '<p>确定要删除该记录？</p>',
                onOk: () => {
                    this.$http.post("http://localhost:3000/upload/removes",{ids:id})
                    .then(res=>{
                        this.getData();
                        this.$Message.info('删除成功');
                    })
                }
            });
        },
        mesAdd(){
            // this.modal = true;
            // this.idFlag = false;
            // this.formValidate = {}
            // Object.assign(this.formValidate,{name:"",password:""});
            // this.titleUpdata = "添加用户信息";
        },
        onSelectChange(rows){
            if(rows){
                var ids = [];
                rows.filter(res=>{
                    ids.push(res._id);
                });
                this.ids = ids;
            }
            console.log(rows)
            this.$emit("img",rows);
        },
        change: function (page) {
            this.filter.page = page;
            this.getData();
        },
        changePage(rows){
            this.filter.limit = rows;
            this.getData();
        },
        beforeUoload(res){
            if(this.cate==""){
                this.$Message.error('请选择上传的分类');
                return false;
            }
        },
        onSuccess(){
            this.getData()
        }
        
    },
    created(){
        this.getCate();
        this.getData()
    },
}
</script>

<style scoped>
    .tab{
        /* max-height:442px; */
        /* overflow:scroll; */
        margin-top:10px
    }
    .inputlenth{
      width:350px;
      float: left;
      /* display: inline-block; */
      margin-bottom: 7px;
  }
  .page{
    margin-top:10px
  }
</style>

